<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: xiaodi 53527718@qq.com
 * @LastEditTime: 2025-11-10 22:42:05
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>预结单</title>
    <style>
      @page {
        margin: 0;
      }

      /**打印样式增加内边距*/
      @media print {
        .more-bill-card {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }

      .more-bill-card .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000;
      }

      .more-bill-card .description {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000;
        margin: 4px 0;
      }

      .more-bill-card .desc-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000;
        margin-top: 4px;
      }

      .more-bill-card .desc-item .desc-item-right {
        align-items: center;
        width: 200px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .more-bill-card .desc-item .desc-item-right > span:last-child {
        text-align: right;
      }

      .more-bill-card .desc-line {
        width: 100%;
        height: 1px;
        background: #000;
        margin-top: 6px;
        border-top: 1px solid #000;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .more-bill-card .desk-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
        margin-top: 4px;
      }

      .more-bill-card .desk-box .desk-box-left {
        width: 70px;
      }

      .more-bill-card .desk-box .desk-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        max-width: 300px;
        line-height: 20px;
      }

      .more-bill-card .desk-box:last-child {
        margin-right: 0;
      }

      .more-bill-card .good-list-box {
        margin-top: 4px;
      }

      .more-bill-card .good-list-box .good-item {
        display: grid;
        grid-template-columns: 1fr 31px 29px 36px;
        align-items: center;
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
        gap: 8px;
      }

      /* 表头特殊布局 */
      .more-bill-card .good-item.header {
        display: grid;
        grid-template-columns: 1fr 47px  29px 36px;
        align-items: center;
        gap: 8px;
      }
      /* 5列布局（带会员价） */
      .more-bill-card .good-item.header-5,
      .more-bill-card .good-item.summary.header-5 {
        grid-template-columns:1fr 47px  29px 36px 36px;
      }

      /* 菜名部分 - 自适应宽度，允许换行 */
      .more-bill-card .good-list-box .good-item .food-name {
        word-break: break-all;
        line-height: 1.2;
        overflow-wrap: break-word;
      }

      /* 单价部分 - 固定宽度，右对齐 */
      .food-price {
        text-align: left;
        /* white-space: nowrap; */
        word-break: break-all;
        overflow-wrap: break-word;
      }

      /* 数量部分 - 固定宽度，居中 */
      .food-quantity {
        text-align: center;
        /* white-space: nowrap; */
        word-break: break-all;
        overflow-wrap: break-word;

      }

      /* 金额部分 - 固定宽度，右对齐 */
      .food-amount {
        text-align: right;
        /* white-space: nowrap; */
        word-break: break-all;
        overflow-wrap: break-word;
      }

      /* 表头样式 */
      .more-bill-card .good-item.header {
        font-weight: bold;
        font-size: 12px;
        padding-top: 4px;
      }

      /* 汇总行样式 */
      .more-bill-card .good-item.summary {
        display: grid;
        grid-template-columns: 1fr 50px 60px 60px;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: bold;
        border-bottom: 1px solid #000;
        margin: 4px 0;
        padding: 4px 0;
      }
      
      /* 会员价列样式 */
      .more-bill-card .good-item .food-vip {
        text-align: center;
        white-space: nowrap;
      }

      /* .more-bill-card .good-list-box .good-item .width-100 {
            width: 100px;
        } */

      /* .font_food {
            text-align: center;
        } */

      .more-bill-card .good-list-box .good-sku-item {
        margin-top: 4px;
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        color: #000000;
        line-height: 18px;
      }

      .more-bill-card .address-box {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        text-align: center;
        color: #000000;
        line-height: 24px;
        margin-top: 80px;
      }

      .desc-item-left {
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="more-bill-card" v-if="postMessageDatas.detail">
        <h1 class="title">{{ postMessageDatas.detail.shopInfo.shop_name }}</h1>
        <div class="description">【预结单】</div>
        <div class="desk-box">
          <div class="desk-box-left">桌台：</div>
          <!-- <span class="desk-item" v-for="desk in postMessageDatas.detail.deskList" :key="desk.desk_id"> -->
          <span class="desk-item"> {{ computedDeskName }} </span>
        </div>
        <div class="desc-item">
          <div>收银员：</div>
          <span>{{postMessageDatas.detail.clerkName }}</span>
        </div>
        <div class="desc-item">
          <div>
            单号：{{ postMessageDatas.ticket_id }}(第{{postMessageDatas.detail.printNum}}次打印）
          </div>
          <!-- <span>{{ postMessageDatas.detail.timeInfo.printTime }}</span> -->
        </div>
        <div class="desc-item">
          <div>打印时间：{{ postMessageDatas.detail.timeInfo.printTime }}</div>
          <span>午市</span>
        </div>
        <div class="desc-item">
          <div>开台时间：{{ postMessageDatas.detail.timeInfo.openDeskTime }}</div>
          <span>午市</span>
        </div>
        <div class="good-item header" :class="{ 'header-5': postMessageDatas?.detail?.priceInfo?.is_vip == 1 }">
          <div class="food-name">菜品</div>
          <div class="food-quantity">数量</div>
          <div class="food-price">单价</div>
          <div class="food-vip" v-if="postMessageDatas?.detail?.priceInfo?.is_vip == 1">会员价</div>
          <div class="food-amount">金额</div>
        </div>
        <div class="desc-line"></div>
        <!-- 酒席菜品 -->
        <div class="good-item summary" v-if="postMessageDatas?.detail?.feast_food_list.length > 0" :class="{ 'header-5': postMessageDatas?.detail?.priceInfo?.is_vip == 1 }">
          <div class="food-name">酒席</div>
          <div class="food-quantity">{{postMessageDatas?.detail?.priceInfo.openNum}} 席</div>
          <div class="food-price">{{postMessageDatas?.detail?.priceInfo.feastMoney}}</div>
          <div class="food-vip" v-if="postMessageDatas?.detail?.priceInfo?.is_vip == 1"></div>
          <div class="food-amount">{{postMessageDatas?.detail?.priceInfo.allFeastMoney}}</div>
        </div>
        <div
          class="good-list-box"
          v-for="(food,index) in postMessageDatas.detail.feast_food_list"
          :key="index"
        >
          <div class="good-item" :class="{ 'header-5': postMessageDatas?.detail?.priceInfo?.is_vip == 1 }">
            <div class="food-name">{{ food.name }}</div>
            <div class="food-quantity">
              {{ food.num }}{{ food.unit }} {{ food.desk_num != '1' ? `*${food.desk_num}席` : '' }}
            </div>
            <div class="food-price">{{ food.price || food.money }}</div>
            <div class="food-vip" v-if="postMessageDatas?.detail?.priceInfo?.is_vip == 1">{{ food.member_price || food.price || food.money }}</div>
            <div class="food-amount">{{ food.total_money }}</div>
          </div>
          <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
            （{{ dealFoodSkuDescFun(food) }}）
          </div>
          <div class="good-list-box" v-for="(data,index) in food.groupInfo" :key="index">
            <div class="good-item" :class="{ 'header-5': postMessageDatas?.detail?.priceInfo?.is_vip == 1 }">
              <div class="food-name">{{ data.name }}</div>
              <div class="food-quantity">
                {{ data.num }}{{ data.unit }} {{ data.desk_num != '1' ? `*${data.desk_num}席` : ''
                }}
              </div>
              <div class="food-price">-</div>
              <div class="food-vip" v-if="postMessageDatas?.detail?.priceInfo?.is_vip == 1">-</div>
              <div class="food-amount">-</div>
            </div>
          </div>
        </div>
        <div
          class="desc-line"
          v-if="postMessageDatas.detail.foodList.length&&postMessageDatas.detail.feast_food_list.length"
        ></div>
        <div
          class="good-list-box"
          v-for="(food,index) in postMessageDatas.detail.foodList"
          :key="index"
        >
          <div class="good-item" :class="{ 'header-5': postMessageDatas?.detail?.priceInfo?.is_vip == 1 }">
            <div class="food-name">{{ food.name }}</div>
            <div class="food-quantity">
              {{ food.num }}{{ food.unit }} {{ food.desk_num != '1' ? `*${food.desk_num}席` : '' }}
            </div>
            <div class="food-price">{{ food.price || food.money }}</div>
            <div class="food-vip" v-if="postMessageDatas?.detail?.priceInfo?.is_vip == 1">{{ food.member_price || food.price || food.money }}</div>
            <div class="food-amount">{{ food.total_money }}</div>
          </div>
          <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
            （{{ dealFoodSkuDescFun(food) }}）
          </div>
          <div class="good-list-box" v-for="(data,index) in food.groupInfo" :key="index">
            <div class="good-item" :class="{ 'header-5': postMessageDatas?.detail?.priceInfo?.is_vip == 1 }">
              <div class="food-name">{{ data.name }}</div>
              <div class="food-quantity">
                {{ data.num }}{{ data.unit }} {{ data.desk_num != '1' ? `*${data.desk_num}席` : ''
                }}
              </div>
              <div class="food-price">-</div>
              <div class="food-vip" v-if="postMessageDatas?.detail?.priceInfo?.is_vip == 1">-</div>
              <div class="food-amount">-</div>
            </div>
          </div>
        </div>
        <div class="desc-line"></div>
        <div class="desc-item">
          <div>小计：</div>
          <span>{{ postMessageDatas.detail.priceInfo.originMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.backNum && postMessageDatas.detail.priceInfo.backNum > 0">
          <div>退菜：</div>
          <span>-{{ postMessageDatas.detail.priceInfo.backMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.presentMoney && postMessageDatas.detail.priceInfo.presentMoney > 0">
          <div>赠送金额：</div>
          <span>-{{ postMessageDatas.detail.priceInfo.presentMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.memberSubMoney && postMessageDatas.detail.priceInfo.memberSubMoney > 0">
          <div>会员优惠：</div>
          <span>-{{ postMessageDatas.detail.priceInfo.memberSubMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.couponMoney && postMessageDatas.detail.priceInfo.couponMoney > 0">
          <div>优惠券：</div>
          <span>-{{ postMessageDatas.detail.priceInfo.couponMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.pointMoney && postMessageDatas.detail.priceInfo.pointMoney > 0">
          <div>积分抵扣：</div>
          <span>-{{ postMessageDatas.detail.priceInfo.pointMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.reduceMoney && postMessageDatas.detail.priceInfo.reduceMoney > 0">
          <div>抹零：</div>
          <span>-{{ postMessageDatas.detail.priceInfo.reduceMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.discountMoney && postMessageDatas.detail.priceInfo.discountMoney > 0">
          <div>折扣：</div>
          <span>-{{ postMessageDatas.detail.priceInfo.discountMoney }}</span>
        </div>
        <div class="desc-item" v-if="postMessageDatas?.detail?.priceInfo?.serviceMoney && postMessageDatas.detail.priceInfo.serviceMoney > 0">
          <div>服务费：</div>
          <span>+{{ postMessageDatas.detail.priceInfo.serviceMoney }}</span>
        </div>
        <div class="desc-item">
          <div>应收合计：</div>
          <span>{{ postMessageDatas.detail.priceInfo.payMoney }}</span>
        </div>
        <div class="desc-line"></div>
        <template
          v-if="postMessageDatas.detail.userInfo && postMessageDatas.detail.userInfo.grade_name"
        >
          <div class="desc-item">
            <div>会员卡号：</div>
            <span>{{hiddenNumber(postMessageDatas.detail.userInfo.user_id) }}</span>
          </div>
          <div class="desc-item">
            <div>会员等级：</div>
            <span>{{ postMessageDatas.detail.userInfo.grade_name }}</span>
          </div>
          <div class="desc-item">
            <div>会员姓名：</div>
            <span>{{ postMessageDatas.detail.userInfo.real_name }}</span>
          </div>
          <div class="desc-item">
            <div>积分账户：</div>
            <span>{{ postMessageDatas.detail.userInfo.points }}</span>
          </div>
          <div class="desc-item">
            <div>账户余额：</div>
            <span>{{ postMessageDatas.detail.userInfo.balance }}</span>
          </div>
        </template>
        <div class="address-box">
          <span>{{ postMessageDatas.detail.shopInfo.address }}</span>
          <span>订座电话：{{ postMessageDatas.detail.shopInfo.phone }}</span>
          <span>技术支持：贵州一粒米科技有限公司</span>
        
        </div>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          postMessageDatas: {
            detail: {
              foodList: [],
              feast_food_list: [],
              back_list: [],
              deskList: [],
              shopInfo: {},
              userInfo: {},
              priceInfo: {},
              timeInfo: {},
              coupon: {}
            }
          }
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess) => {
            this.postMessageDatas = mess
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        },
        computed: {
          computedDeskName() {
            let deskNameList = []
            if (
              this.postMessageDatas &&
              this.postMessageDatas.detail &&
              this.postMessageDatas.detail.deskList &&
              this.postMessageDatas.detail.deskList.length
            ) {
              deskNameList = this.postMessageDatas.detail.deskList.map(desk => {
                return `${desk.name}(${desk.use_num})`
              })
              return deskNameList.join('、')
            }
            return ''
          },
          // 处理回显菜品的规格信息（做法+口味+部位）
          dealFoodSkuDescFun() {
            return function (item) {
              if (item && item.notes && item.notes.length) {
                return item.notes.join('、')
              } else {
                return false
              }
            }
          },
          // 隐藏字符串中间五位数替换成符号“ * ”
          hiddenNumber(val) {
            return function (val) {
              const phoneNumber = val ? String(val) : ''
              return phoneNumber.replace(/(\d{3})\d{4}(\d{3})/, '$1*****$2')
            }
          }
        }
      })
    </script>
  </body>
</html>
